import React from 'react'
import {connect} from 'react-redux'
import {actionCreators} from './store'
import { Link } from 'react-router-dom'
import {HeaderWrapper,
Logo,
Var,
NavItem,
Seaver,
Addition,
InputBox,
InputBoxittle,
InputBoxSwitch,
InputBoxItem,
Button,
SeaverWai
} from './style'
import {CSSTransition} from 'react-transition-group'
 class Haeder extends React.PureComponent{ 
    getHeaderInputBox(){
        const {focused,list,page,mouseIn,totalPage,changsList}=this.props
        const newList =list.toJS()
        const pageList = [] 
        if(newList.length){
            for (let i = (page-1)*10; i < (page+(totalPage-page))*10; i++) {
                pageList.push(
                    <InputBoxItem key={newList[i]}>{newList[i]}</InputBoxItem>
                )  
        }
        }
        if(focused||mouseIn){
            return(                                        
                   <InputBox 
                        onMouseEnter={this.props.onMouseIn}
                        onMouseLeave={this.props.onMouseOut}>
                       <InputBoxittle>
                           热门搜索
                       <InputBoxSwitch onClick={()=>changsList(page,totalPage)}>
                           换一批
                       </InputBoxSwitch>
                       </InputBoxittle>
                      {pageList}      
                   </InputBox>
           )
        }
        else{
            return null
        }
   }
    render(){
        const {focused,handleInputFocus,handleInputBlur}=this.props
        return(
            <HeaderWrapper>
                <Link to='/'>
                    <Logo/>
                </Link>
                <Var>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    <NavItem className='right'>
                    <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <NavItem className='right'>登陆</NavItem>
                    <SeaverWai>
                    <CSSTransition
                        in={focused}
                        timeout={300}
                        classNames='slide'
                    >
                        <Seaver
                            className={focused? 'focused':''}
                            onFocus={handleInputFocus}
                            onBlur={handleInputBlur}
                        ></Seaver>
                    </CSSTransition>
                            <i className={focused? 'focused iconfont':'iconfont'}>&#xe623;</i>
                        {this.getHeaderInputBox()}
                    </SeaverWai>
                </Var>
                <Addition>
                    <Button className='writing'>
                    <i className="iconfont">&#xe608;</i>
                    写文章
                    </Button>
                    <Button>注册</Button>
                </Addition>
            </HeaderWrapper>

        )
    }
}
const mapStateToProps=(state)=>{
    return{
        focused:state.getIn(['header','focused']),
        list:state.getIn(['header','list']),  
        page:state.getIn(['header','page']),
        mouseIn:state.getIn(['header','mouseIn']),
        totalPage:state.getIn(['header','totalPage'])
    }
}
const mapDispatchToProps=(dispatch)=>{
    return{
        handleInputFocus(){
            dispatch(actionCreators.getList())
            dispatch(actionCreators.handeritem())
        },
        handleInputBlur(){
            dispatch(actionCreators.additem())
        },
        onMouseIn(){
            dispatch(actionCreators.mouseIn())
        },
        onMouseOut(){
            dispatch(actionCreators.mouseOut())
        },
        changsList(page,totalPage){
            if(page<totalPage){
                dispatch(actionCreators.changelist(page+1))
            }else if(page-1>(totalPage-1)){
                dispatch(actionCreators.changelist(totalPage))
            }else{
            dispatch(actionCreators.changelist(1))
            }
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps) (Haeder)